<!--<div>-->
<!--  <div class="searchItem">-->
<!--    <label for="commodity">商品：</label>-->
<!--    <input id="commodity" nz-input placeholder="请输入用户Id" [(ngModel)]="query."/>-->
<!--  </div>-->
<!--  <div class="searchItem">-->
<!--    <label>分类：</label>-->
<!--    <nz-select [(ngModel)]="query." nzMode="multiple"-->
<!--               [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">-->
<!--      <nz-option [nzValue]="0" nzLabel="购买"></nz-option>-->
<!--      <nz-option [nzValue]="1" nzLabel="免费领取"></nz-option>-->
<!--    </nz-select>-->
<!--  </div>-->
<!--  <div class="searchItem">-->
<!--    <label>品牌：</label>-->
<!--    <nz-select [(ngModel)]="query." nzMode="multiple"-->
<!--               [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">-->
<!--      <nz-option [nzValue]="0" nzLabel="购买"></nz-option>-->
<!--      <nz-option [nzValue]="1" nzLabel="免费领取"></nz-option>-->
<!--    </nz-select>-->
<!--  </div>-->
<!--  <div class="searchItem">-->
<!--    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>-->
<!--    <button nz-button nzType="default" (click)="resetCondition()">重置</button>-->
<!--  </div>-->
<!--</div>-->
<!--表格-->
<div style="margin-bottom: 8px">
  <button nz-button nzType="primary" (click)="addArticle()">添加文章</button>
</div>
<nz-table
  #rowSelectionTable
  nzSize="small"
  nzTableLayout="fixed"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="listData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">排序</th>
    <th nzAlign="center">文章ID</th>
    <th nzAlign="center">文章分类</th>
    <th nzAlign="center" nzWidth="200px">文章标题</th>
    <th nzAlign="center">副标题</th>
    <th nzAlign="center">主图</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center" nzWidth="200px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
    <td nzAlign="center">{{(query.page - 1) * query.pageSize + index + 1}}</td>
    <td nzAlign="center">{{data['id']}}</td>
    <td nzAlign="center">{{data['classifyName']}}</td>
    <td nzAlign="center">{{data['title']}}</td>
    <td nzAlign="center">{{data['subtitleName']}}</td>
    <td nzAlign="center">
      <img
        nz-image
        width="60px"
        height="60px"
        *ngIf="data['picture']"
        [nzSrc]="data['picture']"
      />
    </td>
    <td nzAlign="center" [attr.statusColor]="data['status']">{{STATUS[data['status']]}}</td>
    <td nzAlign="center">
      <a (click)="move(data['id'],1)" *ngIf="index!==0">上移</a>
      <a (click)="move(data['id'],2)" *ngIf="index+1!==rowSelectionTable.data.length">下移</a>
      <a (click)="edit(data)">编辑</a>
      <a style="color: #F56C6C" (click)="changeStatus(data,2)" *ngIf="data['status']===1">下架</a>
      <a style="color: #27D525" (click)="changeStatus(data,1)" *ngIf="data['status']!==1">上架</a>
      <a nzPopconfirmPlacement="top" style="color: #F56C6C"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除?"
         nzOkText="确认"
         (nzOnConfirm)="deleteArticle(data['id'])"
         nzCancelText="取消">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listData.total }} 条</ng-template>
